<template>
    <basic-container>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="图片设置" name="A">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" label-position="left">
                    <el-form-item prop="uploadFilePathType" label="图片存放：">
                        <el-radio-group v-model="ruleForm.uploadFilePathType">
                            <el-col>
                                <el-radio label="sid">按照文件名存放(例:/店铺id/图片)</el-radio>
                            </el-col>
                            <el-col>
                                <el-radio label="sidYear">按照年份存放(例:/店铺id/年/图片)</el-radio>
                            </el-col>
                            <el-col>
                                <el-radio label="sidYearMonth">按照年月存放(例:/店铺id/年/月/图片)</el-radio>
                            </el-col>
                            <el-col>
                                <el-radio label="sidYearMonthDay">按照年月日存放(例:/店铺id/年/月/日/图片)</el-radio>
                            </el-col>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="设置图片" >
                    </el-form-item>
                        <el-form-item label="图片上传路径：" prop="uploadFilePath">
                            <el-input v-model="ruleForm.uploadFilePath" style="width: 100px;"></el-input>
                            <span style="color: darkred">图片上传路径，填写文件夹名，默认为upload，改变名称可以有效保护图片资源</span>
                        </el-form-item>
                        <el-form-item label="图片文件大小：" prop="imageFileSize">
                            <el-input v-model="ruleForm.imageFileSize" style="width: 100px;"></el-input> MB     (1024KB=1MB)
                            <span style="color: darkred">图片文件大小，图片大小默认不可超过该设置值</span>
                        </el-form-item>
                        <el-form-item label="图片的扩展名：" prop="imageSuffix" >
                            <el-input v-model="ruleForm.imageSuffix" style="width: 300px;"></el-input>
                            <span style="color: darkred">图片扩展名，用于判断上传图片是否为后台允许，多个后缀名间请用 ","间隔隔开。</span>
                        </el-form-item>
                    <el-form-item label="设置视频" >
                    </el-form-item>
                    <el-form-item label="视频的扩展名：" prop="videoSuffix" >
                        <el-input v-model="ruleForm.videoSuffix" style="width: 300px;"></el-input>
                        <span style="color: darkred">视频的扩展名，用于判断上传图片是否为后台允许，多个后缀名间请用 ","间隔隔开。</span>
                    </el-form-item>
                    <el-form-item label="视频文件大小：" prop="videoFileSize" >
                        <el-input v-model="ruleForm.videoFileSize" style="width: 100px;"></el-input> MB     (1024KB=1MB)
                        <span style="color: darkred">视频文件大小，视频大小默认不可超过该设置值</span>
                    </el-form-item>
                    <el-form-item label="附件文件大小：" prop="fileFileSize">
                        <el-input v-model="ruleForm.fileFileSize" style="width: 100px;"></el-input> MB     (1024KB=1MB)
                        <span style="color: darkred">附件文件大小，文件大小默认不可超过该设置值</span>
                    </el-form-item>
                    <el-form-item label="附件文件的扩展名：" prop="fileSuffix">
                        <el-input v-model="ruleForm.fileSuffix" style="width: 300px;"></el-input>
                        <span style="color: darkred">附件文件的扩展名，用于判断附件文件是否为后台允许，多个后缀名间请用 ","间隔隔开。</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadBtn">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="默认图片设置" name="B">
                <div style="width: 70%;">
                    <el-form ref="form" :model="addForm" label-width="150px">
                        <div class="adAccUrl">
                            <el-form-item label="默认会员头像:">
                                <div>
                                    <el-col :span="12">
                                        <el-form-item prop="adAccUrl">
                                            <el-input :readonly="true" @focus="openSelFile(0)" v-model="addForm.memberIcon" size="mini"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
                                        <div class="demo-image__preview">
                                            <el-image :src="addForm.memberIcon"
                                                      width="20"
                                                      height="20"
                                            >
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </el-col>
                                    <el-col style="width: 90px;margin-left: 15px;">
                                        <el-form-item >
                                            <el-button  icon="el-icon-search" type="primary" @click="openSelFile(0)" size="mini">预览</el-button>
                                        </el-form-item>
                                    </el-col>
                                </div>
                            </el-form-item>
							<el-form-item label="默认店铺logo:">
							    <div>
							        <el-col :span="12">
							            <el-form-item prop="adAccUrl">
							                <el-input :readonly="true" @focus="openSelFile(1)"  v-model="addForm.storeLogo" size="mini"></el-input>
							            </el-form-item>
							        </el-col>
							        <el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
							            <div class="demo-image__preview">
							                <el-image :src="addForm.storeLogo"
							                          width="20"
							                          height="20"
							                >
							                    <div slot="error" class="image-slot">
							                        <i class="el-icon-picture-outline"></i>
							                    </div>
							                </el-image>
							            </div>
							        </el-col>
							        <el-col style="width: 90px;margin-left: 15px;">
							            <el-form-item >
							                <el-button  icon="el-icon-search" type="primary" @click="openSelFile(1)" size="mini">预览</el-button>
							            </el-form-item>
							        </el-col>
							    </div>
							</el-form-item>

                            <el-form-item label="设置融创logo:">
                                <div>
                                    <el-col :span="12">
                                        <el-form-item prop="adAccUrl">
                                            <el-input :readonly="true" @focus="openSelFile(3)"  v-model="addForm.rongChuangLogo" size="mini"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
                                        <div class="demo-image__preview">
                                            <el-image :src="addForm.rongChuangLogo"
                                                      width="20"
                                                      height="20"
                                            >
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </el-col>
                                    <el-col style="width: 90px;margin-left: 15px;">
                                        <el-form-item >
                                            <el-button  icon="el-icon-search" type="primary" @click="openSelFile(3)" size="mini">预览</el-button>
                                        </el-form-item>
                                    </el-col>
                                </div>
                            </el-form-item>

                            <el-form-item label="设置融创分享图片:">
                                <div>
                                    <el-col :span="12">
                                        <el-form-item prop="adAccUrl">
                                            <el-input :readonly="true" @focus="openSelFile(4)"  v-model="addForm.rongChuangSharePic" size="mini"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
                                        <div class="demo-image__preview">
                                            <el-image :src="addForm.rongChuangSharePic"
                                                      width="20"
                                                      height="20"
                                            >
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </el-col>
                                    <el-col style="width: 90px;margin-left: 15px;">
                                        <el-form-item >
                                            <el-button  icon="el-icon-search" type="primary" @click="openSelFile(4)" size="mini">预览</el-button>
                                        </el-form-item>
                                    </el-col>
                                </div>
                            </el-form-item>
							<el-form-item label="默认店铺首页banner:">
							    <div>
							        <el-col :span="12">
							            <el-form-item prop="adAccUrl">
							                <el-input :readonly="true" @focus="openSelFile(2)"  v-model="addForm.storeBanner" size="mini"></el-input>
							            </el-form-item>
							        </el-col>
							        <el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
							            <div class="demo-image__preview">
							                <el-image :src="addForm.storeBanner"
							                          width="20"
							                          height="20"
							                >
							                    <div slot="error" class="image-slot">
							                        <i class="el-icon-picture-outline"></i>
							                    </div>
							                </el-image>
							            </div>
							        </el-col>
							        <el-col style="width: 90px;margin-left: 15px;">
							            <el-form-item >
							                <el-button  icon="el-icon-search" type="primary" @click="openSelFile(2)" size="mini">预览</el-button>
							            </el-form-item>
							        </el-col>
							    </div>
							</el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
						<selFile ref="selFile" @callback="selFileCallBack" albumCode="pic_root" :whereUpload=whereUpload dialogTitle="选择图片1" selectType="checkbox" selMaxWidth="300px" selMaxHeight="300px"></selFile>
						
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>

    </basic-container>
</template>
<script>
    import {
        setUpload,
        getUpload
    } from "../../api/base/sysSet/uploadSet";
    import selFile from "@/components/file/selFile";
    import uploadPic from "@/components/file/uploadPic";
    import {removeSelf} from "../../api/base/goods/specification";
    export default {
        components: {
            selFile,
            uploadPic
        },
        data() {
            return {
                whereUpload:"upLoadSet",
                loadBtn:false,
                addForm: {
                    memberIcon:'',
                    storeLogo:'',
                    rongChuangLogo:'',
                    rongChuangSharePic:'',
                    storeBanner:'',
                },
                activeName: 'A',
                ruleForm: {
                    uploadFilePathType:'',
                    uploadFilePath: '',
                    imageSuffix: '',
                    imageFileSize: '',
                    videoSuffix: '',
                    videoFileSize:'',
                    fileFileSize:'',
                    fileSuffix: '',
                },
                rules: {
                    uploadFilePathType:[
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    uploadFilePath: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    imageSuffix: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    imageFileSize: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    videoSuffix: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    videoFileSize: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    fileFileSize: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    fileSuffix: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                },
				type:0,
            };
        },
        created(){
            this.getData()
        },
        methods: {
			openSelFile(type){
				console.log(type)
				this.type=type
				this.$refs.selFile.open();
			},
            getData(){
                getUpload().then(res=>{
                    console.log(res)
                    if(res.data.code==200){
                        this.ruleForm=res.data.data
                        this.addForm.memberIcon=res.data.data.memberIcon
                        this.addForm.storeLogo=res.data.data.storeLogo
                        this.addForm.rongChuangLogo = res.data.data.rongChuangLogo
                        this.addForm.rongChuangSharePic = res.data.data.rongChuangSharePic
                        this.addForm.storeBanner=res.data.data.storeBanner
                    }
                })

            },
            // 选择图片
            selFileCallBack(obj) {
				if(this.type==0){
					this.addForm.memberIcon = obj[0];
				}else if(this.type==1){
					this.addForm.storeLogo = obj[0];
				}else if(this.type==2){
					this.addForm.storeBanner = obj[0];
				}else if(this.type==3){
                    this.addForm.rongChuangLogo = obj[0];
                }else if(this.type==4){
                    this.addForm.rongChuangSharePic = obj[0];
                }
                
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loadBtn=true
                        setUpload(this.ruleForm).then(res=>{
                            if(res.status==200){
                                this.loadBtn=false
                                this.$message({
                                    message:'提交成功',
                                    type:'success'
                                })
                                this.activeName="A"
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            onSubmit() {
				console.log(this.addForm)
                setUpload(this.addForm).then(res=>{
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName="B"
                })

            },
            handleClick() {
            }
        }
    };
</script>